import React from 'react';
import { Card, List, Avatar, Tag, Button, Divider } from 'antd';
import { SvgIcon } from '@/components/icon';

interface VersionItem {
  id: string;
  version: string;
  date: string;
  time: string;
}

interface HistoryVersionsProps {
  onRestore: (version: string) => void;
}

const HistoryVersions: React.FC<HistoryVersionsProps> = ({ onRestore }) => {
  // 模拟版本历史数据
  const historyData: VersionItem[] = [
    {
      id: '1',
      version: '发布于2024.7.18 11:00',
      date: '2024.7.18',
      time: '11:00'
    },
    {
      id: '2',
      version: '发布于2024.7.19 11:00',
      date: '2024.7.19',
      time: '11:00'
    },
    {
      id: '3',
      version: '发布于2024.7.19 11:00',
      date: '2024.7.19',
      time: '11:00'
    }
  ];

  return (
    <Card 
      title={
        <div className="flex items-center">
          <span className="text-[16px] font-medium">历史版本</span>
        </div>
      }
      className="h-full overflow-auto"
      bodyStyle={{ padding: '0', height: 'calc(100% - 57px)', overflowY: 'auto' }}
    >
      <List
        itemLayout="horizontal"
        dataSource={historyData}
        renderItem={(item) => (
          <List.Item
            className="px-6 py-4 hover:bg-[#F2F3F5] cursor-pointer"
            key={item.id}
          >
            <div className="flex flex-col w-full">
              <div className="flex items-center justify-between w-full mb-2 p-2">
                <div className="flex items-center">
                  {/* <Avatar
                    shape="square"
                    size={48}
                    className="mr-3"
                    icon={<SvgIcon icon="bi--file-earmark-text" />}
                  /> */}
                  <div className="flex flex-col">
                    <span className="text-[14px] font-medium text-[#1D2129]">
                      {item.version}
                    </span>
                  </div>
                </div>
                <Button 
                  type="primary" 
                  size="small"
                  className="bg-gradient-to-r from-[#7B67EE] to-[#7B67EE]"
                  onClick={() => onRestore(item.id)}
                >
                  恢复此版本
                </Button>
              </div>
            </div>
          </List.Item>
        )}
      />
    </Card>
  );
};

export default HistoryVersions; 